<?php

use app\assets\BackendAsset as Asset;
use app\models\tableModel\AdminRoleModel;

/* @var $this yii\web\View */
/* @var $model app\models\tableModel\NewsModel */
/* @var $form yii\widgets\ActiveForm */
/* @var $isCreate bool */

?>
<el-main class="content-wrapper no-pl no-pr no-border bg-gray">
    <el-form :model="form" :rules="formRules" ref="ruleForm" label-width="140px"
             class="form-600" label-position="left" :validate-on-rule-change="false">

        <el-card shadow="hover" class="overflow-init">

            <el-form-item label="标题" prop="title" class="form-item" :inline-message="true"
                          :error="customErrMsg.title" ref="formItem_title">

                <el-input v-model="form.title" size="small" class="form-element" resize="none"
                          placeholder="请输入标题" type="textarea" maxlength="50" show-word-limit
                          :autosize="{ minRows: 3}">>
                </el-input>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                                什么是行内说明？
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>

            <el-form-item label="分类编号" prop="cate_id" class="form-item" :inline-message="true"
                          :error="customErrMsg.cate_id" ref="formItem_cate_id">

                <treeselect v-model="form.cate_id" :options="category.list" placeholder="请选择分类"
                            noChildrenText="暂无子分类" :load-options="loadCategory"
                            v-show="category.list.length > 0" ref="selectCate" class="form-element"
                            :default-expand-level="99999" @select="changeCategory">
                    <label slot="option-label" slot-scope="{ node }">
                        {{ node.raw.name }}
                    </label>
                    <label slot="value-label" slot-scope="{ node }">
                        {{ node.raw.name }}
                    </label>
                </treeselect>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light" placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                                什么是行内说明？
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>

            <el-form-item label="文章封面" prop="thumb" class="form-item" :inline-message="true"
                          :error="customErrMsg.thumb" ref="formItem_thumb">

                <?= $this->render('../common/uploader.php', [
                    'column'   => 'form.thumb',
                    'scenario' => 'news',
                ]) ?>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                                什么是行内说明？
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>

            <el-form-item label="状态" prop="status" class="form-item" :inline-message="true"
                          :error="customErrMsg.status" ref="formItem_status">

                <el-radio-group v-model="form.status" size="mini" class="form-element">

                    <el-radio v-for="item in setting.status_list" :label="item.value">
                        {{item.text}}
                    </el-radio>

                </el-radio-group>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                                什么是行内说明？
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>

            <el-form-item label="是否原创" prop="is_origin" class="form-item" :inline-message="true"
                          :error="customErrMsg.is_origin" ref="formItem_is_origin">

                <el-radio-group v-model="form.is_origin" size="mini" class="form-element">

                    <el-radio v-for="item in setting.is_origin_list" :label="item.value">
                        {{item.text}}
                    </el-radio>

                </el-radio-group>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                                什么是行内说明？
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>

            <el-form-item label="转载地址" prop="reprint_url" class="form-item" :inline-message="true"
                          :error="customErrMsg.reprint_url" ref="formItem_reprint_url"
                          v-if="settingOver && form.is_origin==setting.is_origin_list.no.value">

                <el-input type="textarea" placeholder="请输入转载地址" v-model="form.reprint_url"
                          class="form-element" maxlength="200" show-word-limit type="string"
                          :autosize="{ minRows: 6}">
                </el-input>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                                什么是行内说明？
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>

        </el-card>

        <el-card shadow="hover">

            <el-form-item label="排序" prop="sort" class="form-item" :inline-message="true"
                          :error="customErrMsg.sort" ref="formItem_sort">

                <el-input v-model="form.sort" size="small" class="form-element"
                          placeholder="请输入排序" type="number">
                </el-input>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                                什么是行内说明？
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>

            <el-form-item label="关键词" prop="keywords" class="form-item" :inline-message="true"
                          :error="customErrMsg.keywords" ref="formItem_keywords">

                <div class="keywords-wrapper form-element">

                    <el-select v-model="form.keywords" multiple filterable allow-create
                               default-first-option placeholder="请选择/添加文章关键词"
                               style="width: 100%" v-loading="loadingKeyWords"
                               element-loading-text="正在获取中..." class="form-item"
                               element-loading-spinner="page-hide">

                        <el-option v-for="(item, key) in noSelKeywords" :key="key"
                                   :label="item" :value="item" class="display-inline">
                        </el-option>

                    </el-select>
                    <el-button class="ml-10 el-icon-refresh" circle @click="reloadKeyword(false)"
                               title="重新加载关键词" style="height:40px;">
                    </el-button>
                </div>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                                什么是行内说明？
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>

            <el-form-item label="简介" prop="description" class="form-item" :inline-message="true"
                          :error="customErrMsg.description" ref="formItem_description">

                <el-input type="textarea" placeholder="请输入简介" v-model="form.description"
                          class="form-element" maxlength="" show-word-limit type="string"
                          :autosize="{ minRows: 6}">
                </el-input>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                                什么是行内说明？
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>

            <el-form-item label="内容" prop="content" class="form-item" :inline-message="true"
                          :error="customErrMsg.content" ref="formItem_content">

                <?= $this->render('../common/html-editor.php', [
                    'code'     => 'form.content',
                    'height'   => '600',
                    'scenario' => 'news'
                ]) ?>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                                什么是行内说明？
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>

        </el-card>

        <el-card shadow="hover">
            <el-form-item label="开启SEO" class="form-item" :inline-message="true"
                          v-if="settingOver">

                <el-radio-group v-model="form.setting.open_seo" size="mini"
                                class="form-element">

                    <el-radio v-for="item in setting.open_seo_list" :label="item.value+''">
                        {{item.text}}
                    </el-radio>

                </el-radio-group>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                            什么是行内说明？
                        </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>

            <el-form-item label="SEO标题" class="form-item" :inline-message="true"
                          v-if="openSeo">

                <el-input type="textarea" placeholder="请输入SEO标题" class="form-element"
                          maxlength="300" show-word-limit type="string"
                          :autosize="{ minRows: 6}" v-model="form.setting.seo_title">
                </el-input>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                            什么是行内说明？
                        </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5">
                    <i class="el-icon-warning font-second"></i>
                    <span class="font-third">
                        支持变量：<br/>
                        <code>{SITE_NAME}</code> - 站点名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <code>{CATE_NAME}</code> - 分类名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <code>{NEWS_TITLE}</code> - 文章标题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                </div>

            </el-form-item>

            <el-form-item label="SEO关键词" class="form-item" :inline-message="true"
                          v-if="openSeo">

                <el-input type="textarea" placeholder="请输入SEO关键词"
                          v-model="form.setting.seo_keywords" type="string"
                          class="form-element" maxlength="300" show-word-limit
                          :autosize="{ minRows: 6}">
                </el-input>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                            什么是行内说明？
                        </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5">
                    <i class="el-icon-warning font-second"></i>
                    <span class="font-third">
                        支持变量：<br/>
                        <code>{SITE_NAME}</code> - 站点名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <code>{CATE_NAME}</code> - 分类名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <code>{NEWS_TITLE}</code> - 文章标题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <code>{NEWS_KEYWORDS}</code> - 文章关键词&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                </div>

            </el-form-item>

            <el-form-item label="SEO描述" class="form-item" :inline-message="true"
                          v-if="openSeo">


                <el-input type="textarea" placeholder="请输入SEO描述"
                          v-model="form.setting.seo_description" class="form-element"
                          maxlength="300" show-word-limit type="string"
                          :autosize="{ minRows: 6}">
                </el-input>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                            什么是行内说明？
                        </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5">
                    <i class="el-icon-warning font-second"></i>
                    <span class="font-third">
                        支持变量：<br/>
                        <code>{SITE_NAME}</code> - 站点名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <code>{CATE_NAME}</code> - 分类名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <code>{NEWS_TITLE}</code> - 文章标题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <code>{NEWS_DESC}</code> - 文章简介&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                </div>

            </el-form-item>
        </el-card>

        <el-card shadow="hover" ref="formItem_extra_data"
                 v-if="form.extra_data && !$w.isEmpty(form.extra_data)">
            <el-form-item v-for="(item, key) in form.extra_data" :label="item.text" class="form-item"
                          :inline-message="true">

                <el-input v-model="item.value" size="small" class="form-element"
                          placeholder="请输入附加数据" type="string">
                </el-input>

                <div class="form-element-append-inline" style="display: none;">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            行内说明内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                                什么是行内说明？
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        非行内说明文本
                    </span>
                </div>

            </el-form-item>
        </el-card>

    </el-form>
    <div class="form-bottom-free"></div>
</el-main>

<el-footer class="bottom-button" :height="50">
    <el-button size="mini" type="danger" @click="cancel" v-show="pageDialog.isIframe">
        取消
    </el-button>
    <?php if (AdminRoleModel::checkAuth('create')) { ?>
        <el-button size="mini" type="success" @click="submit" v-if="setting.isCreate === true">
            创建
        </el-button>
    <?php } ?>
    <?php if (AdminRoleModel::checkAuth('update')) { ?>
        <el-button size="mini" type="primary" @click="submit" v-if="setting.isCreate === false">
            保存
        </el-button>
    <?php } ?>
</el-footer>

<?php
Asset::addCss($this, '/plugin/vue-treeselect/css/vue-treeselect.min.css');
Asset::addCss($this, '/css/backend/news-form.css');

Asset::addScript($this, '/plugin/vue-treeselect/js/vue-treeselect.min.js');
Asset::addScript($this, '/js/backend/news-form.js');
$isCreate = !isset($isCreate) || !$isCreate ? 'false' : 'true'; // 是否新建
$this->registerJs('instance = new app(' . $isCreate . ');');
?>
